{% extends 'index.html' %}
{% block ace-content %}
<link rel="stylesheet" href="/static/dist/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/dist/css/jquery.orgchart.css">	
<style type="text/css"> 
	#chart-container { text-align: left; }
    .orgchart { background: #fff; }
    .orgchart td.left, .orgchart td.right, .orgchart td.top { border-color: #aaa; }
    .orgchart td>.down { background-color: #aaa; }
    .orgchart .middle-level .title { background-color: #006699; }
    .orgchart .middle-level .content { border-color: #006699; }
    .orgchart .product-dept .title { background-color: #009933; }
    .orgchart .product-dept .content { border-color: #009933; }
    .orgchart .rd-dept .title { background-color: #993366; }
    .orgchart .rd-dept .content { border-color: #993366; }
    .orgchart .pipeline1 .title { background-color: #996633; }
    .orgchart .pipeline1 .content { border-color: #996633; }
    .orgchart .frontend1 .title { background-color: #cc0066; }
    .orgchart .frontend1 .content { border-color: #cc0066; }  
	td.details-control {
	    background: url('/static/img/details_open.png') no-repeat center center; */
	    cursor: pointer;
	}
	tr.shown td.details-control {
	    background: url('/static/img/details_close.png') no-repeat center center;
	} 
</style>
{% endblock %}
{% block page-content %}

<div id="page-wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header"><i class="fa  fa-cogs "></i> 数据库配置</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
			<div class="row">
                <div class="col-lg-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            	<i class="fa  fa-paper-plane  "></i> Inception服务器
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
								<form role="form" method="post" id="addInception" class="main form-horizontal" >{% csrf_token %}			
									<div class="form-group" >
										 <label class="col-sm-3 control-label"><i class="fa fa-globe"></i> Inception主机Ip</label>
										 <div class="col-sm-6">
										 	<input class="form-control" type="text" value="{{incept.db_host|default:"" }}" placeholder="不能为空" name="db_host" />
										 </div>
									</div>
									
									<div class="form-group" >
										 <label class="col-sm-3 control-label"><i class="fa fa-subscript"></i> Inception端口</label>
										 <div class="col-sm-6">
										 	<input class="form-control" type="text"   value="{{incept.db_port|default:"" }}" placeholder="不能为空" name="db_port" />
										 </div>
									</div>									

									<div class="form-group" >
										 <label class="col-sm-3 control-label"><i class="fa fa-magic"></i> 备份数据库地址</label>
										 <div class="col-sm-6">
										 	<input class="form-control" type="text" value="{{incept.db_backup_host|default:"" }}" placeholder="192.168.88.201" name="db_backup_host" />
										 </div>
									</div>			
			
									<div class="form-group" >
										 <label class="col-sm-3 control-label"><i class="fa fa-user"></i> 备份数据库账户</label>
										 <div class="col-sm-6">
										 	<input class="form-control" type="text" value="{{incept.db_backup_user|default:"" }}" placeholder="inception" name="db_backup_user" />
										 </div>
									</div>
													
																		
									<div class="form-group" >
										 <label class="col-sm-3 control-label"><i class="fa fa-keyboard-o"></i> 备份数据库密码</label>
										 <div class="col-sm-6">
										 	<input class="form-control" type="password"   value="{{incept.db_backup_passwd|default:"" }}" placeholder="******" name="db_backup_passwd" />
										 </div>
									</div>	

									<div class="form-group" >
										 <label class="col-sm-3 control-label"><i class="fa fa-database"></i> 备份数据端口</label>
										 <div class="col-sm-6">
										 	<input class="form-control" type="text" value="{{incept.db_backup_port|default:"" }}" placeholder="3306" name="db_backup_port" />
										 </div>
									</div>	
									
									<div class="hr hr32 hr-dotted"></div>                                        
									<div class="form-group">
										<div class="col-md-offset-3 col-md-9">
											<button class="btn btn-default" type="button" onclick="addInceptionSever(this)">
												<i class="fa fa-check"></i>
																提交
											</button>						
															&nbsp; &nbsp; &nbsp;
											<button class="btn btn-default" type="reset">
												<i class="fa fa-undo"></i>
																撤销
											</button>
										</div>
									</div>
									</form>	
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <div class="col-lg-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            	<i class="fa   fa-comment-o    "></i> SQL工单审核配置
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body center">
								<form role="form" method="post" id="editAuditControl" class="main form-horizontal" >{% csrf_token %}		
									<div class="form-group" >
										 <label class="col-sm-3 control-label"><a href="javascript:;" class="tooltip-test" data-toggle="tooltip" title="测试环境: 是否开启审核通过后自动授权"><i class="fa fa-smile-o"></i> 自动授权</a></label>
										 <div class="col-sm-6">
											   <select  class="form-control" name="t_auto_audit">
											   		{% if config.t_auto_audit == 1 %}
													<option selected="selected" value="1" name="t_auto_audit">开启</option>
													<option value="0" name="t_auto_audit">关闭</option>
													{% else %}
													<option selected="selected" value="0" name="t_auto_audit">关闭</option>
													<option  value="1" name="t_auto_audit">开启</option>
													{% endif %}				
												</select>	
										 </div>
									</div>
									
									<div class="form-group" >
										 <label class="col-sm-3 control-label"><a href="javascript:;" class="tooltip-test" data-toggle="tooltip" title="测试环境: 是否开启备份"><i class="fa fa-smile-o"></i> 开启备份</a></label>
										 <div class="col-sm-6">
											   <select class="form-control" name="t_backup_sql">
											   		{% if config.t_backup_sql == 1 %}
													<option selected="selected" value="1" name="t_backup_sql">开启</option>
													<option value="0" name="t_backup_sql">关闭</option>		
													{% else %}	
													<option selected="selected" value="0" name="t_backup_sql">关闭</option>
													<option value="1" name="t_backup_sql">开启</option>																
													{% endif %}	
												</select>	
										 </div>
									</div>									

									<div class="form-group" >
										 <label class="col-sm-3 control-label"><a href="javascript:;" class="tooltip-test" data-toggle="tooltip" title="测试环境: 是否开启邮件通知"><i class="fa fa-smile-o"></i> 邮件通知</a></label>
										 <div class="col-sm-6">
											   <select class="form-control" name="t_email">
											   		{% if config.t_email == 1 %}
													<option selected="selected" value="1" name="t_email">开启</option>	
													<option value="0" name="t_email">关闭</option>	
													{% else %}
													<option selected="selected" value="0" name="t_email">关闭</option>	
													<option value="1" name="t_email">开启</option>														
													{% endif %}	
												</select>	
										 </div>
									</div>			
									<legend></legend> 	
									<div class="form-group" >
										 <label class="col-sm-3 control-label"><a href="javascript:;" class="tooltip-test" data-toggle="tooltip" title="正式环境: 是否开启审核通过后自动授权"><i class="fa fa-meh-o"></i> 自动授权</a></label>
										 <div class="col-sm-6">
											   <select class="form-control" name="p_auto_audit">
											   		{% if config.p_auto_audit == 1 %}
											   		<option selected="selected" value="1" name="p_auto_audit">开启</option>
													<option value="0" name="p_auto_audit">关闭</option>
													{% else %}	
											   		<option  value="1" name="p_auto_audit">开启</option>
													<option selected="selected" value="0" name="p_auto_audit">关闭</option>													
													{% endif %}					
												</select>	
										 </div>
									</div>
													
																		
									<div class="form-group" >
										 <label class="col-sm-3 control-label"><a href="javascript:;" class="tooltip-test" data-toggle="tooltip" title="正式环境: 是否开启备份"><i class="fa fa-meh-o"></i> 开启备份</a></label>
								 <div class="col-sm-6">
											   <select class="form-control" name="p_backup_sql">
											   		{% if config.p_backup_sql == 1 %}
											   		<option selected="selected" value="1" name="p_backup_sql">开启</option>
													<option value="0" name="p_backup_sql">关闭</option>		
													{% else %}	
											   		<option  value="1" name="p_backup_sql">开启</option>
													<option selected="selected" value="0" name="p_backup_sql">关闭</option>														
													{% endif %}				
												</select>	
										 </div>
									</div>	

									<div class="form-group" >
										 <label class="col-sm-3 control-label"><a href="javascript:;" class="tooltip-test" data-toggle="tooltip" title="正式环境是否开启邮件通知"><i class="fa fa-meh-o"></i> 邮件通知</a></label>
										 <div class="col-sm-6">
											   <select class="form-control" name="p_email">
											   		{% if config.p_email == 1 %}
											   		<option selected="selected" value="1" name="p_email">开启</option>
													<option value="0" name="p_email">关闭</option>	
													{% else %}	
											   		<option  value="1" name="p_email">开启</option>
													<option selected="selected" value="0" name="p_email">关闭</option>														
													{% endif %}		
												</select>	
										 </div>
									</div>	
									<legend></legend> 
									<div class="form-group" >
										 <label class="col-sm-3 control-label"><a href="javascript:;" class="tooltip-test" data-toggle="tooltip" title="哪些用户组可以审核SQL"><i class="fa fa-magic"></i> 审核组</a></label>
										 <div class="col-sm-6">
											   <select multiple class="selectpicker" data-live-search="true" class="form-control" name="audit_group">
											   		<option  value="" name="audit_group">请选择一个组</option>
											   		{% for ds in groupList %}
											   		{% if ds.count == 1 %}
														<option selected="selected" value="{{ds.id}}" name="audit_group">{{ds.name}}</option>	
													{% else %}
														<option value="{{ds.id}}" name="audit_group">{{ds.name}}</option>	
													{% endif %}
													{% endfor %}	
												</select>	
										 </div>
									</div>									
									<div class="hr hr32 hr-dotted"></div>                                        
									<div class="form-group">
										<div class="col-md-offset-3 col-md-9">
											<button class="btn btn-default" type="button" onclick="editAuditConfig(this)">
												<i class="fa fa-check"></i>
																提交
											</button>						
															&nbsp; &nbsp; &nbsp;
											<button class="btn btn-default" type="reset">
												<i class="fa fa-undo"></i>
																撤销
											</button>
										</div>
									</div>
									</form>	
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>                
              
                <div class="col-lg-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            	<i class="fa   fa-comments-o   "></i> 自定义高危SQL
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                        	<div>
                        		<button type="button" class="btn btn-xs btn-default" data-toggle="modal" data-target="#myConstomModal"><i class="glyphicon glyphicon-plus"></i></button>
                        	</div>
							<table  width="100%" class="table table-striped table-bordered table-hover dataTable no-footer" id="customSQLList">						
	                                <thead>
											<tr>
												<th class="text-center">
													<label>
														<span class="lbl"></span>
													</label>
													ID
												</th>
												<th class="text-center">SQL内容</th>				
												<th class="text-center">操作</th>
											</tr>											    
	                                </thead>
	                                <tbody>
	                                	{% for ds in sqlList %}
	                                		<tr>
		                                		<td class="text-center">
		                                			{{ds.id}}
		                                		</td>

		                                		<td class="text-center">
		                                			<span class="tooltip-test" data-toggle="tooltip" title="{{ds.sql}}">{{ds.sql|slice:":40" }}...</span>
		                                		</td>
		                                		
		                                		<td class="text-center">
													<div>																				
														<div class="btn-group">	
															<button type="button" class="btn btn-xs btn-default" onclick="modfCustomSql(this,{{ ds.id}})">
																<abbr title="編輯任務"><i class="fa fa-edit"></i>
															</button>
														</div>
														<div class="btn-group">	
															<button type="button" class="btn btn-xs btn-default" onclick="delCustomSql(this,'{{ds.sql}}',{{ ds.id}})">
																<abbr title="删除任务"><i class="fa fa-trash"></i>
															</button>											
														</div>
													</div>  	                                			
		                                		</td>	
	                                		</tr>                                			                                		                                			                                			                                			                                		
	                                	{% endfor %}
	                                </tbody>
	                       	</table>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                </div>  


                <!-- /.col-lg-6 -->              
            </div>  
            <div class="row">
                 <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            	<i class="fa  fa-paper-plane-o  "></i> 数据库服务器
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                        	<div>
                        		<button type="button" class="btn btn-xs btn-default" data-toggle="modal" data-target="#myDatabaseModal"><i class="glyphicon glyphicon-plus"></i></button>
                        	</div>
							<table  width="100%" class="table table-striped table-bordered table-hover dataTable no-footer" id="taskTableList">	
						        <thead>
						            <tr>
						                <th class="text-center">详细</th>
						                <th class="text-center">ID</th>
						                <th class="text-center">环境类型</th>
						                <th class="text-center">架构类型</th>
						                <th class="text-center">业务类型</th>
						                <th class="text-center">使用组</th>
						                <th class="text-center">数据库名</th>
						                <th class="text-center">数据库地址</th>
						                <th class="text-center">账户</th>
						                <th class="text-center">端口</th>
										<th class="text-center">标签</th>
										<th class="text-center">操作</th>
						            </tr>
						        </thead>
						        <tfoot>
						            <tr>
						                <th class="text-center">详细</th>
						                <th class="text-center">ID</th>
						                <th class="text-center">环境类型</th>
						                <th class="text-center">架构类型</th>
						                <th class="text-center">业务类型</th>
						                <th class="text-center">使用组</th>
						                <th class="text-center">数据库名</th>
						                <th class="text-center">数据库地址</th>
						                <th class="text-center">账户</th>
						                <th class="text-center">端口</th>
										<th class="text-center">标签</th>
										<th class="text-center">操作</th>
						            </tr>
						        </tfoot>													
		                                <tbody>
	                                	{% for ds in dataBaseList %}
	                                		<tr>
		                                		<td class="text-center">                                		
		                                		</td>	                                		
		                                		<td class="text-center">
		                                			{{ds.id}}
		                                		</td>
		                                		<td class="text-center">
		                                			{% if ds.db_env == 'test' %}
		                                				<span class="label label-success">测试</span>
		                                			{% else %}	                     				
		                                				<span class="label label-info">生产</span>
		                                			{% endif %}
		                                		</td>
		                                		<td class="text-center">
		                                			{% if ds.db_mode == 1 %}
		                                				<span class="label label-info">单例</span>
		                                			{% elif ds.db_mode == 2 %}
		                                				<span class="label label-info">主从</span>
		                                			{% else %}	                     				
		                                				<span class="label label-info">PXC</span>
		                                			{% endif %}
		                                		</td>		                                		
		                                		<td class="text-center">
													{% for s in serviceList %}
														{% if s.id == ds.db_service %}
															{{s.service_name}}
														{% endif %}
													{% endfor %}
		                                		</td>		
		                                		<td class="text-center">
													{% for g in groupList %}
														{% if g.id == ds.db_group %}
															{{g.name}}													
														{% endif %}
													{% endfor %}
		                                		</td>		                                		                                		
		                                		<td class="text-center">
		                                			{{ds.db_name}}
		                                		</td>
		                                		<td class="text-center">
		                                			{{ds.db_host}}
		                                		</td>
		                                		<td class="text-center">
		                                			{{ds.db_user}}
		                                		</td>	
		                                		<td class="text-center">
		                                			{{ds.db_port}}
		                                		</td>
		                                		<td class="text-center">
		                                			<span class="label label-success">{{ds.db_mark|default:"无"}}</span>
		                                		</td>		                                		
		                                		<td class="text-center">
													<div>																				
														<div class="btn-group">	
															<button type="button" class="btn btn-xs btn-default" data-toggle="modal" data-target="#myDatabaseEditModal-{{ds.id}}">
																<abbr title="編輯"><i class="fa fa-edit"></i>
															</button>
														</div>	
														<div class="btn-group">	
																<a href="javascript:" onclick="getMySQLOrgChat(this,{{ds.id}})">
							                                		<button class="btn btn-default btn-xs"  data-toggle="modal" data-target="#mysqlOrgChatModal">					                                					
																		<i class="glyphicon glyphicon-zoom-in  bigger-110 icon-only"></i>
																	</button>
																</a>	
														</div>																										
														<div class="btn-group">	
															<button type="button" class="btn btn-xs btn-default" onclick="delDatabaseSever(this,'{{ds.db_host}}-{{ds.db_name}}',{{ ds.id}})">
																<abbr title="删除"><i class="fa fa-trash"></i>
															</button>											
														</div>
															
													</div>  	                                			
		                                		</td>	
	                                		</tr>                                			                                		                                			                                			                                			                                		
	                                	{% endfor %}
	                                </tbody>																				                                   
	                       	</table>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
            </div>                    
</div>


<div class="modal fade" id="myConstomModal" tabindex="-1" role="dialog" aria-labelledby="myConstomModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myConstomModalLabel">
					添加自定义高危SQL
				</h4>
			</div>
			<div class="modal-body">
				<form role="form" method="post" id="addCustomSql" class="main form-horizontal" >{% csrf_token %}						
					<div class="form-group" >
						 <label class="col-sm-3 control-label"><i class="fa fa-globe"></i>  SQL语句</label>
						 <div class="col-sm-6">
						 	<input class="form-control" type="text" value="" placeholder="DROP DATABASE" name="sql" />
						 </div>
					</div>							
				</form>	
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary" onclick="addCustomSql(this)">
					添加
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>


<div class="modal fade" id="myDatabaseModal" tabindex="-1" role="dialog" aria-labelledby="myDatabaseModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myDatabaseModalLabel">
					添加数据库配置
				</h4>
			</div>
			<div class="modal-body">
				<form role="form" method="post" id="addDatabase" class="main form-horizontal" >{% csrf_token %}	
					<div class="form-group" >
						 <label class="col-sm-3 control-label"><i class="fa fa-shield  "></i> 环境类型</label>
						 <div class="col-sm-6">
							   <select class="form-control" name="db_env">
									<option value="test" name="db_env">测试</option>
									<option value="prod" name="db_env">生产</option>					
								</select>						 	
						 </div>
					</div>	
					<div class="form-group" >
						 <label class="col-sm-3 control-label"><i class="fa fa-map-marker  "></i> 架构类型</label>
						 <div class="col-sm-6">
							   <select class="form-control" name="db_mode">
							   		<option value="1" name="db_mode" >单例</option>
									<option value="2" name="db_mode" >主从</option>
									<option value="3" name="db_mode" >PXC</option>				
								</select>						 	
						 </div>
					</div>							
					<input class="form-control"  type="hidden" value="mysql"  name="db_type" />				
					<div class="form-group">
						 <label class="col-sm-3 control-label"><i class="fa fa-gears"></i>产品线</label>
						 <div class="col-sm-6">
						   <select class="form-control" name="db_project" id="db_project"  onchange="javascript:oBtProjectSelect();">
						   		<option selected="selected" value="">请选择一个类型</option>
									{% for s in projectList %}
										<option value="{{s.id}}" name="db_project">{{s.project_name}}</option>
									{% endfor %}								   							
							</select>
						 </div>
					</div>	
					<div class="form-group">
						 <label class="col-sm-3 control-label"><i class="fa fa-bank"></i>业务类型</label>
						 <div class="col-sm-6">
							<select class="form-control" name="db_service" id="db_service" onchange="javascript:oBtServiceSelect();">
							   		<option selected="selected" value="">请选择一个类型</option>								   							
							</select>
						 </div>
					</div>										
					<div class="form-group" >
						 <label class="col-sm-3 control-label"><i class="fa fa-globe"></i>  数据库IP</label>
						 <div class="col-sm-6">
<!-- 						 	<input class="form-control" type="text" value="" placeholder="不能为空" name="db_host" /> -->
						   <select class="form-control" name="db_host" id="db_host" >
						   		<option selected="selected" value="">请选择一个类型</option>
<!-- 									{% for s in serList %}
										<option value="{{s.ip}}" name="db_host">{{s.ip}}</option>
									{% endfor %}	 -->							   							
							</select>						 	
						 </div>
					</div>
					<div class="form-group">
						 <label class="col-sm-3 control-label"><i class="fa  fa-group"></i>使用组</label>
						 <div class="col-sm-6">
						   <select class="form-control" name="db_group"  >
						   		<option selected="selected" value="">请选择一个类型</option>
									{% for g in groupList %}
										<option value="{{g.id}}" name="db_group">{{g.name}}</option>
									{% endfor %}							   		
							</select>
						 </div>
					</div>					
					<div class="form-group" >
						 <label class="col-sm-3 control-label"><i class="fa fa-database"></i> 数据库名</label>
						 <div class="col-sm-6">
						 	<input class="form-control" type="text" value="" placeholder="不能为空" name="db_name" />
						 </div>
					</div>			

					<div class="form-group" >
						 <label class="col-sm-3 control-label"><i class="fa fa-user"></i> 账户</label>
						 <div class="col-sm-6">
						 	<input class="form-control" type="text" value="" placeholder="不能为空" name="db_user" />
						 </div>
					</div>
					
					<div class="form-group" >
						 <label class="col-sm-3 control-label"><i class="fa fa-subscript"></i> 端口</label>
						 <div class="col-sm-6">
						 	<input class="form-control" type="text"   value="" placeholder="不能为空" name="db_port" />
						 </div>
					</div>				
														
					<div class="form-group" >
						 <label class="col-sm-3 control-label"><i class="fa fa-keyboard-o"></i> 密码</label>
						 <div class="col-sm-6">
						 	<input class="form-control" type="password"   value="" placeholder="不能为空" name="db_passwd" />
						 </div>
					</div>	
					<div class="form-group" >
						 <label class="col-sm-3 control-label"><i class="fa fa-bookmark"></i> 备注</label>
						 <div class="col-sm-6">
						 	<input class="form-control" type="text"  value="" placeholder="第二个分库" name="db_mark" />
						 </div>
					</div>								
					</form>	
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary" onclick="addDatabaseSever(this)">
					添加
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

{% for ds in dataBaseList %}
	<div class="modal fade" id="myDatabaseEditModal-{{ds.id}}" tabindex="-1" role="dialog" aria-labelledby="myDatabaseEditModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myDatabaseEditModalLabel">
						修改数据库配置
					</h4>
				</div>
				<div class="modal-body">
					<form role="form" method="post" id="editDatabase-{{ds.id}}" class="main form-horizontal" >{% csrf_token %}			
						<div class="form-group" >
							 <label class="col-sm-3 control-label"><i class="fa fa-shield  "></i> 环境类型</label>
							 <div class="col-sm-6">
								   <select class="form-control" name="db_env">
								   		{% if ds.db_env == 'test' %}
								   			<option value="test" name="db_env" >测试</option>
											<option value="prod" name="db_env">生产</option>
										{% else %}
											<option value="test" name="db_env">测试</option>
											<option value="prod" name="db_env" selected="selected">生产</option>
										{% endif %}					
									</select>						 	
							 </div>
						</div>	
						<div class="form-group" >
							 <label class="col-sm-3 control-label"><i class="fa fa-map-marker  "></i> 架构类型</label>
							 <div class="col-sm-6">
								   <select class="form-control" name="db_mode">
								   		{% if ds.db_mode == 1 %}
								   			<option value="1" name="db_mode" selected="selected">单例</option>
											<option value="2" name="db_mode">主从</option>
											<option value="3" name="db_mode">PXC</option>
										{% elif ds.db_mode == 2 %}
								   			<option value="1" name="db_mode" >单例</option>
											<option value="2" name="db_mode" selected="selected">主从</option>
											<option value="3" name="db_mode">PXC</option>											
										{% else %}
								   			<option value="1" name="db_mode" >单例</option>
											<option value="2" name="db_mode" >主从</option>
											<option value="3" name="db_mode" selected="selected">PXC</option>
										{% endif %}					
									</select>						 	
							 </div>
						</div>						
						<div class="form-group">
							 <label class="col-sm-3 control-label"><i class="fa fa-gears"></i>产品线</label>
							 <div class="col-sm-6">
							   <select class="form-control" name="db_project"  id="db_project_{{ds.id}}"  onchange="javascript:oBtProjectModfSelect({{ds.id}});">
							   		<option  value="">请选择一个类型</option>
										{% for s in projectList %}
											{% if s.id == ds.db_project %}
												<option selected="selected" value="{{s.id}}" name="db_project">{{s.project_name}}</option>
											{% else %}
												<option value="{{s.id}}" name="db_project">{{s.project_name}}</option>
											{% endif %}
										{% endfor %}								   							
								</select>								
							 </div>
						</div>
						<div class="form-group">
							 <label class="col-sm-3 control-label"><i class="fa fa-bank"></i>业务类型</label>
							 <div class="col-sm-6">
							   <select class="form-control" name="db_service" id="db_service_{{ds.id}}"  onchange="javascript:oBtServiceModfSelect({{ds.id}});">
							   		<option  value="">请选择一个类型</option>
										{% for s in serviceList %}
											{% if s.id == ds.db_service %}
												<option selected="selected" value="{{s.id}}" name="db_service">{{s.service_name}}</option>
											{% elif s.project.id == ds.db_project %}
												<option value="{{s.id}}" name="db_service">{{s.service_name}}</option>
											{% endif %}
										{% endfor %}								   							
								</select>
							 </div>
						</div>					
						<div class="form-group" >
							 <label class="col-sm-3 control-label"><i class="fa fa-globe"></i>  数据库IP</label>
							 <div class="col-sm-6">
							   <select class="form-control" name="db_host" id="db_host_{{ds.id}}">
							   		<option  value="">请选择一个类型</option>
										{% for s in serList %}
											{% if s.ip == ds.db_host %}
												<option selected="selected" value="{{s.ip}}" name="db_host">{{s.ip}}</option>
											{% endif %}
										{% endfor %}								   							
								</select>						 	
							 </div>
						</div>
						

						<div class="form-group">
							 <label class="col-sm-3 control-label"><i class="fa  fa-group"></i>使用组</label>
							 <div class="col-sm-6">
							   <select class="form-control" name="db_group"  >
							   		<option selected="selected" value="">请选择一个类型</option>
										{% for g in groupList %}
											{% if g.id == ds.db_group %}
												<option selected="selected" value="{{g.id}}" name="db_group">{{g.name}}</option>
											{% else %}
												<option value="{{g.id}}" name="db_group">{{g.name}}</option>
											{% endif %}
										{% endfor %}							   		
								</select>
							 </div>
						</div>							
	
						<div class="form-group" >
							 <label class="col-sm-3 control-label"><i class="fa fa-database"></i> 数据库名</label>
							 <div class="col-sm-6">
							 	<input class="form-control" type="text" value="{{ds.db_name|default:""}}" placeholder="不能为空" name="db_name" />
							 </div>
						</div>			
	
						<div class="form-group" >
							 <label class="col-sm-3 control-label"><i class="fa fa-user"></i> 账户</label>
							 <div class="col-sm-6">
							 	<input class="form-control" type="text" value="{{ds.db_user|default:""}}" placeholder="不能为空" name="db_user" />
							 </div>
						</div>
						
						<div class="form-group" >
							 <label class="col-sm-3 control-label"><i class="fa fa-subscript"></i> 端口</label>
							 <div class="col-sm-6">
							 	<input class="form-control" type="text"   value="{{ds.db_port|default:""}}" placeholder="不能为空" name="db_port" />
							 </div>
						</div>				
															
						<div class="form-group" >
							 <label class="col-sm-3 control-label"><i class="fa fa-keyboard-o"></i> 密码</label>
							 <div class="col-sm-6">
							 	<input class="form-control" type="password"   value="{{ds.db_passwd|default:""}}" placeholder="不能为空" name="db_passwd" />
							 </div>
						</div>	
						<div class="form-group" >
							 <label class="col-sm-3 control-label"><i class="fa fa-bookmark"></i> 备注</label>
							 <div class="col-sm-6">
							 	<input class="form-control" type="text"  value="{{ds.db_mark|default:""}}" placeholder="第二个分库" name="db_mark" />
							 </div>
						</div>								
						</form>	
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="button" class="btn btn-primary" onclick="editDatabaseSever(this,{{ds.id}})">
						修改
					</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>	
{% endfor %}


         <!-- 模态框（Modal） -->
<div class="modal fade" id="mysqlOrgChatModal" tabindex="-1" role="dialog" aria-labelledby="mysqlOrgChatModalLabel" aria-hidden="true">
	<div class="modal-dialog" style="width:1280px;height:auto;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" 
						aria-hidden="true">×
				</button>
				<h4 class="modal-title" id="mysqlOrgChatModalLabel">
					MySQL拓扑图
				</h4>
			</div>
			<div class="modal-body">
				<div id="chart-container" style="height:600px;overflow:auto; ">
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" 
						data-dismiss="modal">关闭
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal --> 	

<script type="text/javascript" src="/static/js/jquery.orgchart.js"></script>
<script type="text/javascript" src="/static/js/html2canvas.min.js"></script>
<script type="text/javascript"> 

	
	$(document).ready(function() {
	    $('#customSQLList').DataTable();
	} ); 	
	
	function addInceptionSever(obj,op) {
		{% if incept %}
			var putUrl = '/api/inc/config/1/';
			var model = "PUT";
		{% else %}
			var putUrl = '/api/inc/config/';
			var model = "POST";
		{% endif %}
		var btnObj = $(obj);
		var required = ["db_host","db_port",'db_backup_host','db_backup_passwd','db_backup_user','db_backup_port'];
		btnObj.attr('disabled',true);
		var form = document.getElementById('addInception');
		var post_data = {}; 
		for (var i = 1; i < form.length; ++i) {
			var name = form[i].name;
			var value = form[i].value;	
			idx = $.inArray(name, required);						
			if (idx >= 0 && value.length == 0){
				window.wxc.xcConfirm("请注意必填项不能为空~", window.wxc.xcConfirm.typeEnum.error);
				btnObj.removeAttr('disabled');
				return false;
			};	
			if ( value.length != 0 && name.length != 0 ){
				post_data[name] = value;
			};					
		};		
		$.ajax({
			dataType: "JSON",
			url:putUrl, //请求地址
			type:model,  //提交类似
			data:post_data, //提交参数
			success:function(response){
				btnObj.removeAttr('disabled');
				window.wxc.xcConfirm("Inception添加成功", window.wxc.xcConfirm.typeEnum.success);
 				location.reload();
				
			},
	    	error:function(response){
	    		btnObj.removeAttr('disabled');
	    		window.wxc.xcConfirm("Inception添加失败", window.wxc.xcConfirm.typeEnum.error);
/* 	    		location.reload(); */
	    	}
		})	
	}	
			
	function addDatabaseSever(obj) {
		var btnObj = $(obj);
		var required = ["db_host","db_port","db_name","db_user","db_passwd","db_service","db_group"];
		btnObj.attr('disabled',true);
		var form = document.getElementById('addDatabase');
		var post_data = {}; 
		for (var i = 1; i < form.length; ++i) {
			var name = form[i].name;
			var value = form[i].value;	
			idx = $.inArray(name, required);						
			if (idx >= 0 && value.length == 0){
				window.wxc.xcConfirm("请注意必填项不能为空~", window.wxc.xcConfirm.typeEnum.error);
				btnObj.removeAttr('disabled');
				return false;
			};	
			if ( value.length != 0 && name.length != 0 ){
				post_data[name] = value;
			};					
		};		
		$.ajax({
			dataType: "JSON",
			url:'/api/db/config/', //请求地址
			type:"POST",  //提交类似
			data:post_data, //提交参数
			success:function(response){
				btnObj.removeAttr('disabled');
				window.wxc.xcConfirm("数据库添加成功", window.wxc.xcConfirm.typeEnum.success);
 				location.reload();
				
			},
	    	error:function(response){
	    		btnObj.removeAttr('disabled');
	    		window.wxc.xcConfirm("数据库添加失败", window.wxc.xcConfirm.typeEnum.error);
/* 	    		location.reload(); */
	    	}
		})	
	}
	
	function addCustomSql(obj) {
		var btnObj = $(obj);
		var required = ["sql"];
		btnObj.attr('disabled',true);
		var form = document.getElementById('addCustomSql');
		var post_data = {}; 
		for (var i = 1; i < form.length; ++i) {
			var name = form[i].name;
			var value = form[i].value;	
			idx = $.inArray(name, required);						
			if (idx >= 0 && value.length == 0){
				window.wxc.xcConfirm("请注意必填项不能为空~", window.wxc.xcConfirm.typeEnum.error);
				btnObj.removeAttr('disabled');
				return false;
			};	
			if ( value.length != 0 && name.length != 0 ){
				post_data[name] = value;
			};					
		};		
		$.ajax({
			dataType: "JSON",
			url:'/api/sql/custom/', //请求地址
			type:"POST",  //提交类似
			data:post_data, //提交参数
			success:function(response){
				btnObj.removeAttr('disabled');
				window.wxc.xcConfirm("SQL添加成功", window.wxc.xcConfirm.typeEnum.success);
 				location.reload();
				
			},
	    	error:function(response){
	    		btnObj.removeAttr('disabled');
	    		window.wxc.xcConfirm("SQL添加失败", window.wxc.xcConfirm.typeEnum.error);
/* 	    		location.reload(); */
	    	}
		})	
	}	
	
	function editDatabaseSever(obj,id) {
		var btnObj = $(obj);
		var required = ["db_host","db_port","db_name","db_user","db_passwd","db_group","db_service"];
		btnObj.attr('disabled',true);
		var form = document.getElementById('editDatabase-' + id);
		var post_data = {}; 
		for (var i = 1; i < form.length; ++i) {
			var name = form[i].name;
			var value = form[i].value;	
			idx = $.inArray(name, required);						
			if (idx >= 0 && value.length == 0){
				window.wxc.xcConfirm("请注意必填项不能为空~", window.wxc.xcConfirm.typeEnum.error);
				btnObj.removeAttr('disabled');
				return false;
			};	
			if ( value.length != 0 && name.length != 0 ){
				post_data[name] = value;
			};					
		};		
		$.ajax({
			dataType: "JSON",
			url:'/api/db/config/'+ id +'/', //请求地址
			type:"PUT",  //提交类似
			data:post_data, //提交参数
			success:function(response){
				btnObj.removeAttr('disabled');
				window.wxc.xcConfirm("数据库修改成功", window.wxc.xcConfirm.typeEnum.success);
 				location.reload();
				
			},
	    	error:function(response){
	    		btnObj.removeAttr('disabled');
	    		window.wxc.xcConfirm("数据库修改失败", window.wxc.xcConfirm.typeEnum.error);
/* 	    		location.reload(); */
	    	}
		})	
	}
	
	function delCustomSql(obj,name,id){
		var btnObj = $(obj);
		var txt=  "是否确认删除？";	
		var option = {
				title: "删除数据("+name+")配置",
				btn: parseInt("0011",2),
				onOk: function(){
					$.ajax({
						  type: 'DELETE',
						  url: '/api/sql/custom/'+ id +'/',
					      success:function(response){			            
								btnObj.removeAttr('disabled');
								window.wxc.xcConfirm("SQL删除成功", window.wxc.xcConfirm.typeEnum.success);
								location.reload();					                
						},
			            error:function(response){
				    		btnObj.removeAttr('disabled');
				    		window.wxc.xcConfirm("SQL删除失败~", window.wxc.xcConfirm.typeEnum.error);
			            },		
						});
				},
				onCancel:function(){	
				},
				onClose:function(){
				}
			}			
		window.wxc.xcConfirm(txt, "custom", option);
	}	
	
	function delDatabaseSever(obj,name,id){
		var btnObj = $(obj);
		var txt=  "是否确认删除？";	
		var option = {
				title: "删除数据("+name+")配置",
				btn: parseInt("0011",2),
				onOk: function(){
					$.ajax({
						  type: 'DELETE',
						  url: '/api/db/config/'+ id +'/',
					      success:function(response){			            
								btnObj.removeAttr('disabled');
								window.wxc.xcConfirm("数据库删除成功", window.wxc.xcConfirm.typeEnum.success);
								location.reload();					                
						},
			            error:function(response){
				    		btnObj.removeAttr('disabled');
				    		window.wxc.xcConfirm("数据库删除失败~", window.wxc.xcConfirm.typeEnum.error);
			            },		
						});
				},
				onCancel:function(){	
				},
				onClose:function(){
				}
			}			
		window.wxc.xcConfirm(txt, "custom", option);
	}	
	
	
	function  modfCustomSql(obj,id){
		var btnObj = $(obj);
		btnObj.attr('disabled',true);
		var post_data = {}; 		
		window.wxc.xcConfirm("请输入新名称：", window.wxc.xcConfirm.typeEnum.input,{
			onOk:function(result){
				if (result.length == 0){
					/* 如果没有输入字符串则直接退出 */
					return;
				};				
				$.ajax({
					  type: 'PUT',
					  url: '/api/sql/custom/'+ id +'/',
					  data:{
						  'sql':result
					  },
				      success:function(response){	
				    	  btnObj.removeAttr('disabled');
			              window.wxc.xcConfirm("SQL修改成功", window.wxc.xcConfirm.typeEnum.success);	
			              location.reload();
					},
		            error:function(response){
		            	btnObj.removeAttr('disabled');
		            	window.wxc.xcConfirm("SQL修改失败！", window.wxc.xcConfirm.typeEnum.error);
		            },							  
					});
				
			}
		});								   
   }
	
	function editAuditConfig(obj) {
		var btnObj = $(obj);
		btnObj.attr('disabled',true);
		$.ajax({
			type: 'POST',
			dataType: "JSON",
			url:'/db/sql/control/', //请求地址
			data:$("#editAuditControl").serialize(), //提交参数
			success:function(response){
                if (response["code"]=="200"){ 
                	window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.success);
                 	location.reload(); 
                }
	        	else{
	        		window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
	        	};	
                btnObj.removeAttr('disabled');
				
			},
	    	error:function(response){
	    		btnObj.removeAttr('disabled');
	    		window.wxc.xcConfirm("网络错误", window.wxc.xcConfirm.typeEnum.error);
/* 	    		location.reload(); */
	    	}
		})	
	}	
	
	
	function oBtProjectSelect(){
		   $('#db_service').removeAttr("disabled");
		   var obj = document.getElementById("db_project"); 
		   var index = obj.selectedIndex;
		   var projectId = obj.options[index].value; 
		   if ( projectId > 0){	 
				$.ajax({
					dataType: "JSON",
					url:'/api/project/'+ projectId + '/', //请求地址
					type:"GET",  //提交类似
					success:function(response){
						var binlogHtml = '<select class="form-control" name="db_service" id="db_service" onchange="javascript:oBtServiceSelect();" required><option selected="selected" name="db_service" value="">请选择业务类型</option>'
						var selectHtml = '';
						for (var i=0; i <response["service_assets"].length; i++){
							 selectHtml += '<option name="db_service" value="'+ response["service_assets"][i]["id"] +'">' + response["service_assets"][i]["service_name"] + '</option>' 
						};                        
						binlogHtml =  binlogHtml + selectHtml + '</select>';
						document.getElementById("db_service").innerHTML= binlogHtml;	
							
					},
				});	
		   }
		   else{
			   $('#db_service').attr("disabled",true);
		   }

	}

	function oBtServiceSelect(){
	 	   $('#db_host').removeAttr("disabled");
		   var obj = document.getElementById("db_service"); 
		   var index = obj.selectedIndex;
		   var id = obj.options[index].value; 
		   if ( id  > 0){	 
				$.ajax({
					dataType: "JSON",
					url:'/assets_server/', //请求地址
					type:"POST",  //提交类似
					data:{
						"id":id,
						"query":'service'
					},
					success:function(response){
						var binlogHtml = '<select multiple class="form-control"  name="db_host" id="db_host"  required>'
						var selectHtml = '';
						for (var i=0; i <response["data"].length; i++){
							 selectHtml += '<option name="db_host" value="'+ response["data"][i]["ip"] +'">' + response["data"][i]["ip"] + '</option>' 
						};                        
						binlogHtml =  binlogHtml + selectHtml + '</select>';
						document.getElementById("db_host").innerHTML= binlogHtml;	
							
					},
				});	
		   }
		   else{
			   $('#db_host option:selected').empty();
			   $('#db_host').attr("disabled",true);
		   }

	}	
	
	function oBtProjectModfSelect(id){
		   $('#db_service_'+id).removeAttr("disabled");
		   var obj = document.getElementById("db_project_"+id); 
		   var index = obj.selectedIndex;
		   var projectId = obj.options[index].value; 
		   if ( projectId > 0){	 
				$.ajax({
					dataType: "JSON",
					url:'/api/project/'+ projectId + '/', //请求地址
					type:"GET",  //提交类似
					success:function(response){
						var binlogHtml = '<select class="form-control" name="db_service" id="db_service_'+ id + '" onchange="javascript:oBtServiceSelect();" required><option selected="selected" name="db_service" value="">请选择业务类型</option>'
						var selectHtml = '';
						for (var i=0; i <response["service_assets"].length; i++){
							 selectHtml += '<option name="db_service" value="'+ response["service_assets"][i]["id"] +'">' + response["service_assets"][i]["service_name"] + '</option>' 
						};                        
						binlogHtml =  binlogHtml + selectHtml + '</select>';
						document.getElementById("db_service_"+id).innerHTML= binlogHtml;	
							
					},
				});	
		   }
		   else{
			   $('#db_service').attr("disabled",true);
		   }

	}

	function oBtServiceModfSelect(id){
	 	   $('#db_host_'+id).removeAttr("disabled");
		   var obj = document.getElementById("db_service_"+id); 
		   var index = obj.selectedIndex;
		   var id = obj.options[index].value; 
		   if ( id  > 0){	 
				$.ajax({
					dataType: "JSON",
					url:'/assets_server/', //请求地址
					type:"POST",  //提交类似
					data:{
						"id":id,
						"query":'service'
					},
					success:function(response){
						var binlogHtml = '<select multiple class="form-control"  name="db_host" id="db_host_'+ id + '" required>'
						var selectHtml = '';
						for (var i=0; i <response["data"].length; i++){
							 selectHtml += '<option name="db_host" value="'+ response["data"][i]["ip"] +'">' + response["data"][i]["ip"] + '</option>' 
						};                        
						binlogHtml =  binlogHtml + selectHtml + '</select>';
						document.getElementById("db_host_"+id).innerHTML= binlogHtml;	
							
					},
				});	
		   }
		   else{
			   $('#db_host_'+ id + 'option:selected').empty();
			   $('#db_host_'+ id).attr("disabled",true);
		   }

	}	
	
	
	function format ( data ) {
	    /* base */
	    var trBaseHtml = '';
		for (var i=0; i <data['base'].length; i++){	
			if (i%6 == 0){
				trBaseHtml += '</tr>';
			}
			if (data['base'][i]["value"] == 'ON'){
				trBaseHtml += '<td>'+ data['base'][i]["name"] +':</td>'+ '<td><font color="green">'+ data['base'][i]["value"] +'</font></td>'		
			}
			else if (data['base'][i]["value"] == 'OFF'){
				trBaseHtml += '<td>'+ data['base'][i]["name"] +':</td>'+ '<td><font color="red">'+ data['base'][i]["value"] +'</font></td>'		
			}
			else{
				trBaseHtml += '<td>'+ data['base'][i]["name"] +':</td>'+ '<td>'+ data['base'][i]["value"] +'</td>'			
			}
				        
		};
 	    var vBaseHtml = '<div class="row"><div class="col-lg-12"><table class="table table-bordered"><caption>基本信息</caption>'+ 
								'<tr>' + trBaseHtml  + '</tr>' +
						'</table></div></div>';	
		/*  pxc */				
		var trPxcHtml = '';
		for (var i=0; i <data['pxc'].length; i++){	
			if (data['pxc'][i]["value"] == 'ON'){
				trPxcHtml += '<tr><td>'+ data['pxc'][i]["name"] +':</td>'+ '<td><font color="green">'+ data['pxc'][i]["value"] +'</font></td></tr>'
			}
			else if (data['pxc'][i]["value"] == 'OFF'){
				trPxcHtml += '<tr><td>'+ data['pxc'][i]["name"] +':</td>'+ '<td><font color="red">'+ data['pxc'][i]["value"] +'</font></td></tr>'
			}
			else{
				trPxcHtml += '<tr><td>'+ data['pxc'][i]["name"] +':</td>'+ '<td>'+ data['pxc'][i]["value"] +'</td></tr>'
			}
			
		};	
	 	var vPXCHmtl = '<div class="col-lg-6"><table class="table table-bordered"><caption>PXC集群信息</caption>'+ 
								trPxcHtml  +
						'</table></div>'; 
		/* master */
		var trMasterHtml = '';
		for (var i=0; i <data['master'].length; i++){	
			trMasterHtml += '<tr><td>'+ data['master'][i]["name"] +':</td>'+ '<td>'+ data['master'][i]["value"] +'</td></tr>'
		}
 	    var vMasterHtml = '<div class="col-lg-4"><table class="table table-bordered"><caption>Master信息</caption>'+ 
								'<tr>' + trMasterHtml  +'</tr>'
						  '</table></div>';	
		/* slave */
		var trSlaveHtml = '';
		for (var i=0; i <data['slave'].length; i++){	
			if (i%4 == 0){
				trSlaveHtml += '</tr>';
			}	
			if (data['slave'][i]["value"] == 'Yes'){
				trSlaveHtml += '<td>'+ data['slave'][i]["name"] +':</td>'+ '<td><font color="green">'+ data['slave'][i]["value"] +'</font></td>'
			}
			else if (data['slave'][i]["value"] == 'No'){
				trSlaveHtml += '<td>'+ data['slave'][i]["name"] +':</td>'+ '<td><font color="red">'+ data['slave'][i]["value"] +'</font></td>'
			}
			else{
				trSlaveHtml += '<td>'+ data['slave'][i]["name"] +':</td>'+ '<td>'+ data['slave'][i]["value"] +'</td>'
			}
			
		}
 	    var vSlaveHtml = '<div class="row"><div class="col-lg-12"><table class="table table-bordered"><caption>Slave信息</caption>'+ 
								'<tr>' + trSlaveHtml  +'</tr>'
						  '</table></div></div>';	
		/* 汇总 */				  
 		if (data['pxc'].length > 0 && data['master'].length > 5){
 			return vBaseHtml + '<div class="row">'  + vPXCHmtl  + vMasterHtml + '</div>';
		} 
 		else if (data['slave'].length > 0){
 			return vBaseHtml  + vSlaveHtml + '</div>';
 		}
 		else if( data['pxc'].length > 0 ){
 			return vBaseHtml + '<div class="row">' + vPXCHmtl + '</div>';
 		}
 		else if ( data['slave'].length > 0 &&  data['master'].length > 5){
 			return vBaseHtml + vSlaveHtml + vMasterHtml + '</div>';
 		}
 		else if(data['master'].length > 5){
 			return vBaseHtml + '<div class="row">' + vMasterHtml + '</div>';
 		}
 		else{
 			return vBaseHtml
 		}
	}
	 
	$(document).ready(function() {
	    var table = $('#taskTableList').DataTable( {
/* 	        "ajax": "../ajax/data/objects.txt", */
	        "columns": [
	            {
	                "className":      'details-control',
	                "orderable":      false,
	                "data":           null,
	                "defaultContent": ''
	            },
	            { "data": "id" },
	            { "data": "环境类型" },
	            { "data": "架构类型" },
	            { "data": "业务类型" },
	            { "data": "使用组" },
	            { "data": "数据库名" },
	            { "data": "数据库地址" },
	            { "data": "账户" },
	            { "data": "端口" },
	            { "data": "标签" },
	            { "data": "操作" }
	        ],
	        "order": [[1, 'asc']]
	    } );
	     
	    // Add event listener for opening and closing details
	    $('#taskTableList tbody').on('click', 'td.details-control', function () {
	    	var dataList = [];
	        var tr = $(this).closest('tr');
	        var row = table.row( tr );
	        dbId = row.data()["id"];
	        $.ajax({
	            url : "/api/db/status/"+dbId+"/",
	            type : "post",
	            async : false,
	            data : {"id":dbId},
	            dataType : "json",
	            success : function(result) {
	            	dataList = result.data;
	            }
	        });	        
/* 	    	console.log(dataList); */
	        if ( row.child.isShown() ) {
	            // This row is already open - close it
	            row.child.hide();
	            tr.removeClass('shown');
	        }
	        else {
	            // Open this row
	            row.child( format(dataList) ).show();
	            tr.addClass('shown');
	        }
	    } );
	} );
	
	
	function getMySQLOrgChat(obj,id) {	
		$.ajax({
			dataType: "JSON",
			url:'/api/db/org/'+ id +'/', //请求地址
			type:"POST",  //提交类似
			success:function(response){
				$('#chart-container').html("");
	    	    $('#chart-container').orgchart({
	      	      'data' : response.data,
	      	      'nodeContent': 'title',
	      	      'direction': 'l2r', 
	      	      'exportFilename': 'MySQL',
	      	      'exportButton': true,
	      	    }); 				
			}					
		});	       
	}		
	
		
	
</script>
{% endblock %}
